import React from "react";
import { useState } from "react";
import './TodoHeader.css';

export default function TodoHeader({addTodo}) {
  //声明状态
  let [msg, setMsg] = useState('');

  //声明回调
  const change = (e) => {
    //更新状态
    setMsg(e.target.value);
  }

  //声明 keyup 回调
  const handleKeyUp = (e) => {
    if(e.keyCode === 13){
      //如果 msg 值为空, 则返回
      if(!msg) return;
      //新增
      addTodo(msg);
      //清空 input
      setMsg('');
    }
  }

  return (
    <div className="todo-header">
      <input onKeyUp={handleKeyUp} value={msg} onChange={change} type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
